<template>
  <div class="planet">
  </div>
  <div class="loading">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="loader text-3xl">科游社</div>
</template>

<script setup lang="ts">
// import { fetchChat } from "@/server";
// const socket = inject<any>('socket')



// 发送和回收一组
// socket.emit('sendMsg','我发过去了')
// socket.on("getMsg", (res:any) => {
//   //res是发过来的data
//   console.log(res);
//   socket.emit('chat', 'connected..') //必需要回应socket-server这句话
//   console.log(socket.id, '监听客户端连接成功-connect')
// })


// 例子
// socket.on('connect', (res:any) => {
//   // console.log('#connect: ', res)
//   const id = socket.id;
//   console.log('#connect,', id, res)
//   // 给服务端发消息
//   socket.emit('chat', 'hello world!', '给客户端发消息')
// })
//登录用户Store
// const authStore = useAuthStore()

// const submit = ()=>{
//   socket.emit('sendMsg',{
//     from:authStore.user._id,
//     to:'635585bb4b08ece85f06f174',
//     message:'4556as4d56as'
//   })
//   socket.on('pushMsg',(data:any)=>{
//     console.log(data)
//   })
//   fetchChat('635585bb4b08ece85f06f174').then((data:any)=>{
//     console.log(data)
//   })
// }


/// Re: 系统事件区域 ========================
// socket.on('disconnect', (msg:any) => {
//     console.log('#disconnect', msg)
// });

// socket.on('disconnecting', () => {
//     console.log('#disconnecting')
// });

// socket.on('error', () => {
//     console.log('#error')
// })

// socket.on('connection', (res:any) => {
//   console.log('#connection: ', res)
// })

// socket.on('connected', (res:any) => {
//   console.log("#connected: ", res);
// })

// socket.on('message', (res:any) => {
//   console.log("#message: ", res)
// })

// socket.on('res', (res:any) => {
//   console.log("#res: ", res)
// })

// Re: 初始化钩子函数区域 ========================
// onMounted(() => {

  // // 连接成功
  // socket.on("connect", () => {
  //   socket.emit('chat', 'connected..') //必需要回应socket-server这句话
  //   console.log(socket.id, '监听客户端连接成功-connect')
  // })

  // socket.on('res', message => {
  //   console.warn(socket.id, message)
  // })

  // // 房间好友上线通知
  // socket.on("handlRequest", (message) => {
  //   console.log('>> handlRequest', message)
  //   alert(message)
  // })

  // // 收到的消息
  // socket.on("receiveMsg", (msg, id) => {
  //   // arr为消息列表
  //   arr.value.push(`${id}：${msg}`)
  // })
// })


//router
const router = useRouter()

onMounted(()=>{
  setTimeout(()=>{
    router.replace('/bbs')
  },1500)

})
</script>
<style scoped>
.planet {
  display: block;
  width: 125px;
  height: 125px;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 50%;
  background: #fcc96b;
  background: #fcc96b;
  background: linear-gradient(180deg,
      #fcc96b 0%,
      #fcc96b 15%,
      #f7ae01 15%,
      #f7ae01 19%,
      #fcc96b 19%,
      #fcc96b 22%,
      #f7ae01 22%,
      #f7ae01 28%,
      #fcc96b 28%,
      #fcc96b 31%,
      #fcc96b 33%,
      #fcc96b 36%,
      #f7ae01 36%,
      #f7ae01 48%,
      #fcc96b 48%,
      #fcc96b 55%,
      #f7ae01 55%,
      #f7ae01 66%,
      #fcc96b 66%,
      #fcc96b 70%,
      #f7ae01 70%,
      #f7ae01 73%,
      #fcc96b 73%,
      #fcc96b 82%,
      #f7ae01 82%,
      #c7ba9d 86%,
      #fcc96b 86%);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.25),
    inset 8px -4px 6px rgba(199, 128, 0, 0.5),
    inset -8px 4px 8px rgba(255, 235, 199, 0.5), inset 20px -5px 12px #f7ae01,
    0 0 100px #ffffff59;
  transform: rotateZ(-15deg);
}

.planet::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 16px solid #e1a519;
  border-top-width: 0;
  border-radius: 50%;
  box-shadow: 0 -2px 0 #c18620;
  animation: rings1 0.8s infinite linear;
}

.planet::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 8px solid #d48b0c;
  border-top-width: 0;
  border-radius: 50%;
  box-shadow: 0 -2px 0 #b99309;
  animation: rings2 0.8s infinite linear;
}

@keyframes rings1 {
  0% {
    transform: rotateX(65deg) rotateZ(0deg) scale(1.75);
  }

  100% {
    transform: rotateX(65deg) rotateZ(360deg) scale(1.75);
  }
}

@keyframes rings2 {
  0% {
    transform: rotateX(65deg) rotateZ(0deg) scale(1.7);
  }

  100% {
    transform: rotateX(65deg) rotateZ(360deg) scale(1.7);
  }
}

.loading {
  --speed-of-animation: 0.9s;
  --gap: 6px;
  --first-color: #4c86f9;
  --second-color: #49a84c;
  --third-color: #f6bb02;
  --fourth-color: #f6bb02;
  --fifth-color: #2196f3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  gap: 6px;
  height: 100px;
}

.loading span {
  width: 4px;
  height: 50px;
  background: var(--first-color);
  animation: scale var(--speed-of-animation) ease-in-out infinite;
}

.loading span:nth-child(2) {
  background: var(--second-color);
  animation-delay: -0.8s;
}

.loading span:nth-child(3) {
  background: var(--third-color);
  animation-delay: -0.7s;
}

.loading span:nth-child(4) {
  background: var(--fourth-color);
  animation-delay: -0.6s;
}

.loading span:nth-child(5) {
  background: var(--fifth-color);
  animation-delay: -0.5s;
}

@keyframes scale {

  0%,
  40%,
  100% {
    transform: scaleY(0.05);
  }

  20% {
    transform: scaleY(1);
  }
}

@keyframes animate8345 {

  0%,
  100% {
    filter: hue-rotate(0deg);
  }

  50% {
    filter: hue-rotate(360deg);
  }
}

.loader {
  color: rgb(0, 0, 0);
  background: linear-gradient(to right, #2d60ec, #3ccfda);
  font-size: 30px;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: animate8345 9s linear infinite;
  font-weight: bold;
}
</style>
<route lang="yaml">
meta:
  layout: default
</route>

